import React from 'react';
import { Popover, Button } from 'antd';
import ProCard from '@ant-design/pro-card';
import ProDescriptions from '@ant-design/pro-descriptions';
import { useNavigate } from 'react-router-dom';
import { DoubleRightOutlined } from '@ant-design/icons';

import './index.css';
import { cardDataSource } from '@/services/Introduction/index';
 
const Index: React.FunctionComponent<{}> = () => {

  const navigate = useNavigate();

  const columns: Array<any> = [
    {
      title: '项目描述',
      key: 'projectDescribe',
      dataIndex: 'projectDescribe',
      render: (value: any, record: any) => {
        return (
          record.projectDescribe ? (
            <Popover content={record.projectDescribe} overlayStyle={{ maxWidth: 280, wordBreak: 'break-all' }}>
              {value}
            </Popover>
          ) : (
            <span>-</span>
          )
        );
      },
    },
    {
      title: 'Gitee地址',
      key: 'giteePath',
      dataIndex: 'giteePath',
      copyable: true,
      render: (value: any, record: any) => {
        return (
          record.giteePath ? (
            <a href={record.giteePath} target='_blank' rel='noreferrer'>{value}</a>
          ) : (
            <span>-</span>
          )
        );
      },
    },
    {
      title: '项目开始日期',
      key: 'projectStartDate',
      dataIndex: 'projectStartDate',
      valueType: 'date',
    },
    {
      title: '项目阶段',
      key: 'projectStage',
      dataIndex: 'projectStage',
      valueType: 'select',
      valueEnum: {
        paln: { text: '准备(计划)中', status: 'Default' },
        build: { text: '搭建中', status: 'Processing' },
        dev: { text: '开发中', status: 'Processing' },
        finish: { text: '已完成', status: 'Success' },
      },
    },
    {
      title: '项目进度',
      key: 'projectProcess',
      dataIndex: 'projectProcess',
      valueType: 'progress',
    },
    {
      title: '项目结束日期',
      key: 'projectEndDate',
      dataIndex: 'projectEndDate',
      valueType: 'date',
    },
    {
      title: '项目使用技术',
      key: 'projectTechnology',
      dataIndex: 'projectTechnology',
      // valueType: 'code',
      render: (value: any, record: any) => {
        return (
          record.projectTechnology ? (
            <span className='my-code-style' >
              {record.projectTechnology}
            </span>
          ) : (
            <span>-</span>
          )
        );
      },
    },
    {
      title: '项目包含知识点',
      key: 'projectKnowledgePoints',
      dataIndex: 'projectKnowledgePoints',
      render: (value: any, record: any) => {
        return (
          record.projectKnowledgePoints ? (
            <span className='my-code-style' >
              {record.projectKnowledgePoints}
            </span>
          ) : (
            <span>-</span>
          )
        );
      },
    },
    {
      title: '项目难度',
      key: 'projectDifficulty',
      dataIndex: 'projectDifficulty',
      valueType: 'rate',
    },
  ];

  // 跳转详情
  const handleToDetail = (path: string) => {
    navigate(path);
  };
  
  return (
    <ProCard
      split='horizontal'
      bordered
      className='my-pro-card-style'
    > 
      {cardDataSource.map((record: any, index: number) => {
        return (
          <ProCard className='inner-my-pro-card-style' key={`my-card-${index + 1}`}>
            <ProDescriptions
              title={record.projectName}
              dataSource={record}
              columns={columns}
              extra={record.projectPath && <Button ghost type='primary' shape='circle' icon={<DoubleRightOutlined />} onClick={() => handleToDetail(record.projectPath)} />}
            />
          </ProCard>
        );
      })}
    </ProCard>
  );
}
 
export default Index;